<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <script src="d3.v4.min.js"></script>
    <script>
      const width = 960
      height = 960
      
      const svg = d3.select("body")
      .append("svg")
      .attr("width",width)
      .attr("height",height)

      //d3.packSiblings的作用就是让circle不重合
      const circles = d3.packSiblings(d3.range(1000)
      .map(d3.randomUniform(8,26))//功能相当于math.rando()
      .map(r=>{ 
        return {
                r:r
        }
      }))

      const color = d3.scaleSequential()
        .domain([0, 1000])    
        .interpolator(d3.interpolateRainbow);

      svg.append("g")
      .attr("transform","translate("+width/2+","+height/2+')')
      .selectAll("circle")
      .data(circles)
      .enter()
      .append("circle")
      .attr("cx",d=>{return d.x})//不规定d.x的后果就是都集中在中心点
      .attr("cy",d=>{return d.y})
      .attr("r",d=>{return d.r})
      .attr("fill",(d,i)=>{
        return color(i)
      })

      
      console.log(circles);
    </script>
</body>
</html>